<!--need_message品牌定制-->
<template>
  <div class='need-message'>
    <div class="needmessage-header">
      <mt-header title="品牌定制">
        <router-link to="/my" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="needmessage-info">
      <ul v-show="message.length != 0">
        <li v-for='(item,key) in message' :key='key'>
          <div class="info-message">
            <div class="message-title">
            <i class='iconfont icon-category'></i><span class='ml'>编号：</span><span>{{item.CustomOrderSn}}</span><p>{{item.CustomId}}</p>
            </div>
            <div class="message-content">
              <p>联系人：<span>{{item.ContactName}}</span></p>
              <p  class="clamp">需求描述：<span>{{item.DemandContent}}</span></p>
            </div>
          </div>
        </li>
        <div class="cb"></div>
        <div class="footer">
          <p>暂无更多</p>
        </div>
      </ul>
      <div class="null-info" v-show='message.length == 0'>
        <p>您尚未提交定制需求，可点击发布</p>
        <router-link to='/need'>
          <mt-button size="large" class="backgrounds">点击发布</mt-button>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
export default {
    data (){
        return {
          message:[]
        }
    },
    created(){
        const that = this;
        const url = that.getUrl('home/custom_info');
        const params = {
            token:that.getToken()
        }
        that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
            if(res.data.code === 0){
//                this.$messagebox('提示', res.data.data);
                that.message = res.data.data
            }else {
                this.$messagebox('提示', res.data.errMsg);
                return false
            }
        }, function (err) {
            this.$messagebox('提示', '找不到服务器，请稍后再试');
        })
    }


}
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .need-message{
    .needmessage-header{
      header{
        background: #fff;
        color: #666;
      }
    }
    .needmessage-info{
      width: 100%;
      .padding(10,15);
      ul{
        li{
          .h(130);
          width: 100%;
          .mt(5);
          background: #fff;
          .info-message{
            .padding(10,10);
            box-sizing: border-box;
            .message-title{
              width: 100%;
              border-bottom:1px solid #DCDCDC;
              i{
                color: #2285DD;
                .fs(23);
              }
              span{
                .fs(14);
                vertical-align: text-bottom;
              }
              span.ml{
                .ml(10);
                .mr(5);
              }
              p{
                display: inline-block;
                float: right;
                .fs(14);
                .pt(6);
                color: #2285DD;
              }
            }
            .message-content{
              .fs(14);
              span{
                vertical-align: top;
              }
              p{
               -webkit-line-clamp: 3;
              }
            }
          }
        }
      }
      .null-info{
        .padding(0,10);
        width: 100%;
        height: 100px;
        /*关键点如下*/
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        p{
          text-align: center;
          .padding(10,0);
          .fs(14)
        }
        button{
          color: #fff;
        }
      }
    }
  }
</style>
